<template>
  <div class="dataShow">
    <header>
      <div class="photo">
        <img src="../assets/img/logo.png" alt="" />
      </div>
      <span class="name">{{ user_name }}</span>
      <el-popconfirm title="确定要退出账号吗？" @confirm="end()">
        <el-button
          type="danger"
          icon="el-icon-refresh-right"
          size="small "
          slot="reference"
          >退出</el-button
        >
      </el-popconfirm>
    </header>
    <main>
      <ul>
        <li>
          <i class="el-icon-success"></i>
          <div>
            <p>活跃人数</p>
            <p>{{ datalist.hotPeople }}</p>
          </div>
        </li>
        <li>
          <i class="el-icon-s-comment"></i>
          <div>
            <p>我的消息</p>
            <p>{{ datalist.myMes }}</p>
          </div>
        </li>
        <li>
          <i class="el-icon-s-marketing"></i>
          <div>
            <p>最新发布</p>
            <p>{{ datalist.new }}</p>
          </div>
        </li>
        <li>
          <i class="el-icon-s-claim"></i>
          <div>
            <p>完结项目</p>
            <p>{{ datalist.finish }}</p>
          </div>
        </li>
      </ul>
      <Echarts />
    </main>
  </div>
</template>

<script>
import axios from "axios";
import Echarts from "../components/Echarts.vue";
export default {
  data() {
    return {
      datalist: {
        hotPeople: 3040,
        myMes: 66,
        new: 120,
        finish: 3430,
      },
      user_name: "",
    };
  },
  components: { Echarts },
  mounted() {
    this.getUser();
  },
  methods: {
    getUser() {
      var token = localStorage.getItem("token");
      var t_id = token.substring(1, token.length - 1).split("#")[1] * 1;
      var u_type = 0;
      switch (this.$route.path.substring(1)) {
        case "DataShow":
          u_type = 1;
          break;
        case "teacher":
          u_type = 2;
          break;
        case "Expert":
          u_type = 3;
          break;
        case "Administrator":
          u_type = 4;
          break;
        default:
          break;
      }
      axios
        .post(`http://localhost:3000/getUser`, { u_id: t_id, u_type: u_type })
        .then((ret) => {
          this.user_name = ret.data.name;
        });
    },
    end() {
      localStorage.removeItem("token");
      this.$router.push("/login");
    },
  },
};
</script>

<style scoped>
header {
  padding: 10px 100px;
  height: 30px;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: right;
}
header > div {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #40c9c6;
  overflow: hidden;
}
header > span.name {
  font: 18px/30px "";
  margin: 0 10px;
}
main > ul {
  width: 100%;
  display: flex;
  margin-top: 30px;
  justify-content: space-around;
}
li {
  width: 200px;
  height: 60px;
  padding: 30px;
  display: flex;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(5px);
  justify-content: space-between;
}
li i {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  color: white;
  font-size: 40px;
  text-align: center;
  line-height: 60px;
}
li:nth-of-type(1) i {
  background-color: red;
}
li:nth-of-type(2) i {
  background-color: rgb(0, 255, 42);
}
li:nth-of-type(3) i {
  background-color: rgb(16, 160, 243);
}
li:nth-of-type(4) i {
  background-color: rgb(236, 240, 14);
}
li div {
  text-align: center;
}
li div p {
  padding: 5px;
  font-size: 14px;
}
img {
  width: 100%;
  height: 100%;
}
</style>
